<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="民事案件" name="1">
        <phase
          :dataList="dataList"
          :listLoading="listLoading"
          :activeName="1"
          @progress="getProgresses"
        ></phase>
      </el-tab-pane>
      <el-tab-pane label="刑事案件" name="2">
        <phase
          :dataList="criminalList"
          :listLoading="listLoading"
          :activeName="2"
          @progress="getProgresses"
        ></phase>
      </el-tab-pane>
      <el-tab-pane label="行政案件" name="3">
        <phase
          :dataList="adminList"
          :listLoading="listLoading"
          :activeName="3"
          @progress="getProgresses"
        ></phase>
      </el-tab-pane>
      <el-tab-pane label="刑附民案件" name="4">
        <phase
          :dataList="crimiCiviList"
          :listLoading="listLoading"
          :activeName="4"
          @progress="getProgresses"
        ></phase>
      </el-tab-pane>
      <el-tab-pane label="刑事自诉案件" name="5">
        <phase
          :dataList="crimiSelfList"
          :listLoading="listLoading"
          :activeName="5"
          @progress="getProgresses"
        ></phase>
      </el-tab-pane>
      <el-tab-pane label="仲裁" name="6">
        <phase
          :dataList="abitrationList"
          :listLoading="listLoading"
          :activeName="6"
          @progress="getProgresses"
        ></phase>
      </el-tab-pane>
      <el-tab-pane label="执行案件" name="7">
        <phase
          :dataList="execList"
          :listLoading="listLoading"
          :activeName="7"
          @progress="getProgresses"
        ></phase>
      </el-tab-pane>
    </el-tabs>

    <!-- 对话框表单 -->
    <el-dialog :visible.sync="dialogVisible" :title="getTitle" width="600px">
      <el-form
        :model="form"
        :rules="formRules"
        ref="formRef"
        label-width="100px"
        label-position="right"
        style="width: 95%; padding: 0 30px"
      >
        <el-form-item label="案件配置项" prop="name">
          <el-input v-model="form.name" placeholder="案件配置项" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProgressList,
  addProgress,
  updateProgress,
  delProgress,
  updateBatchProgress,
} from "@/api/case";
import Phase from "@/components/Case/Phase.vue";

const defaultForm = {
  id: null,
  name: "",
  case_type: null,
  sort: null,
};

export default {
  name: "Config",
  components: {
    Phase,
  },
  computed: {
    getTitle() {
      return this.dialogType === "edit"
        ? `编辑${this.title}`
        : `新增${this.title}`;
    },
  },
  data() {
    return {
      form: Object.assign({}, defaultForm),
      formRules: {
        name: [{ required: true, message: "请输入配置项", trigger: "blur" }],
      },

      title: "案件进度配置",
      warning_title: "进度配置：可上下拖拉重新排序",
      activeName: "1",
      dialogVisible: false,
      dialogType: "new",
      dataList: [],
      criminalList: [],
      adminList: [],
      crimiCiviList: [],
      crimiSelfList: [],
      abitrationList: [],
      execList: [],
      listLoading: true,
    };
  },

  created() {},
  mounted() {
    this.getProgresses();
  },
  methods: {
    getProgresses(params) {
      this.listLoading = true;
      let case_type = null;
      if (params) {
        case_type = params.case_type;
      }
      getProgressList(params)
        .then((res) => {
          if (case_type === null) {
            this.dataList = res.filter((item) => item.case_type == 1);
            this.criminalList = res.filter((item) => item.case_type == 2);
            this.adminList = res.filter((item) => item.case_type == 3);
            this.crimiCiviList = res.filter((item) => item.case_type == 4);
            this.crimiSelfList = res.filter((item) => item.case_type == 5);
            this.abitrationList = res.filter((item) => item.case_type == 6);
            this.execList = res.filter((item) => item.case_type == 7);
          } else if (case_type == 1) {
            this.dataList = res;
          } else if (case_type == 2) {
            console.log(case_type);
            this.criminalList = res;
          } else if (case_type == 3) {
            this.adminList = res;
          } else if (case_type == 4) {
            this.crimiCiviList = res;
          } else if (case_type == 5) {
            this.crimiSelfList = res;
          } else if (case_type == 6) {
            this.abitrationList = res;
          } else if (case_type == 7) {
            this.execList = res;
          }

          this.listLoading = false;
        })
        .catch((error) => {
          console.log(error.message);
          this.$message.error("获取数据失败");
          this.listLoading = false;
        });
    },
    // 增加
    handleAdd() {
      this.form = Object.assign({}, defaultForm);

      this.dialogType = "new";
      this.dialogVisible = true;

      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    //
    handleEdit(scope) {
      this.form = Object.assign({}, scope.row);
      this.dialogType = "edit";

      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    //
    handleDelete({ $index, row }) {
      this.$confirm("确定要删除该信息吗?", "删除提示：", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delProgress(row.id);

          this.dataList.splice($index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("删除失败!");
        });
    },
    // 保存操作
    async handleSave() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;

        const isEdit = this.dialogType === "edit";
        if (isEdit) {
          const res = await updateProgress(this.form);
          console.log(isEdit, res);
          const index = this.dataList.findIndex((v) => v.id === res.id);
          this.dataList.splice(index, 1, res);
        } else {
          this.form.case_type = +this.activeName;
          const sorts = this.dataList.map((item) => {
            return item.sort;
          });
          let max = Math.max.apply(null, sorts);
          // console.log("max=:", max);
          this.form.sort = max + 1;
          const res = await addProgress(this.form);
          const { id } = res;
          if (id > 0) {
            this.getProgresses();
          }
        }

        const { name } = this.form;
        this.dialogVisible = false;
        this.$notify({
          title: "Success",
          dangerouslyUseHTMLString: true,
          message: `
              <div>进度配置: ${name}</div>
            `,
          type: "success",
        });
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.app-container {
  max-width: 900px;
  ::v-deep .el-alert__title {
    font-size: 16px;
    line-height: 24px;
  }
}
</style>